<template>
  <el-dialog
    title="编辑客户反馈"
    :close-on-click-modal="false"
    :visible.sync="visible" width="600px;">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="110px" style="text-align: left;">
      <el-form-item label="项目编号" prop="projectNo">
        <el-input v-model="dataForm.projectNo" placeholder="项目编号" disabled></el-input>
      </el-form-item>
      <el-form-item label="项目名称" prop="projectNickname">
        <el-input v-model="dataForm.projectNickname" placeholder="项目名称" disabled></el-input>
      </el-form-item>
      <el-form-item label="客户电话" prop="clientPhone">
        <el-input v-model="dataForm.clientPhone" placeholder="客户电话"></el-input>
      </el-form-item>
      <el-form-item label="调查表内容" >
        <table border="1" cellspacing="0" cellpadding="0" class="sig_table">
          <tr><th>1、测绘项目成果质量：</th></tr>
          <tr><td>
              <el-form-item prop="gradeQuality">
                <el-radio-group v-model="dataForm.gradeQuality">
                  <el-radio :label="20">非常满意</el-radio>
                  <el-radio :label="18">满意</el-radio>
                  <el-radio :label="14">基本满意</el-radio>
                  <el-radio :label="10">不满意</el-radio>
                </el-radio-group>
              </el-form-item>
          </td></tr>
          <tr><th>2、测绘项目成果满足要求程度：</th></tr>
          <tr><td>
            <el-form-item prop="gradeRequire">
              <el-radio-group v-model="dataForm.gradeRequire">
                <el-radio :label="20">非常满意</el-radio>
                <el-radio :label="18">满意</el-radio>
                <el-radio :label="14">基本满意</el-radio>
                <el-radio :label="10">不满意</el-radio>
              </el-radio-group>
            </el-form-item>
          </td></tr>
          <tr><th>3、工作中工作人员协调交流和工作态度：</th></tr>
          <tr><td>
            <el-form-item prop="gradeAttitude">
              <el-radio-group v-model="dataForm.gradeAttitude">
                <el-radio :label="20">非常满意</el-radio>
                <el-radio :label="18">满意</el-radio>
                <el-radio :label="14">基本满意</el-radio>
                <el-radio :label="10">不满意</el-radio>
              </el-radio-group>
            </el-form-item>
          </td></tr>
          <tr><th>4、测绘工期进度情况：</th></tr>
          <tr><td>
            <el-form-item prop="gradeProgress">
              <el-radio-group v-model="dataForm.gradeProgress">
                <el-radio :label="20">非常满意</el-radio>
                <el-radio :label="18">满意</el-radio>
                <el-radio :label="14">基本满意</el-radio>
                <el-radio :label="10">不满意</el-radio>
              </el-radio-group>
            </el-form-item>
          </td></tr>
          <tr><th>5、测绘人员的技术熟练程度：</th></tr>
          <tr><td>
            <el-form-item prop="gradeProficiency">
              <el-radio-group v-model="dataForm.gradeProficiency">
                <el-radio :label="20">非常满意</el-radio>
                <el-radio :label="18">满意</el-radio>
                <el-radio :label="14">基本满意</el-radio>
                <el-radio :label="10">不满意</el-radio>
              </el-radio-group>
            </el-form-item>
          </td></tr>
        </table>
      </el-form-item>
      <el-form-item label="客户意见" prop="clientAdvice">
        <el-input v-model="dataForm.clientAdvice" type="textarea" placeholder="请输入客户意见" rows="4"></el-input>
      </el-form-item>
      <el-form-item label="来源" prop="origin">
        <el-input v-model="dataForm.origin" disabled></el-input>
      </el-form-item>
      <el-form-item label="上传附件" prop="fileName">
        <el-upload :action="upResFileUrl"
                   :data="{'projectNo': dataForm.projectNo}"
                   :limit="1"
                   name="file"
                   ref="upload"
                   accept=".pdf,.doc,.docx,.ppt,.pptx,.xls,.xlxs,image/*"
                   :headers="tokenHeaders"
                   :before-upload="handleBeforeUpload"
                   :on-success="handleSuccess"
                   :on-error="handleError">
          <el-button size="small" plain>选择文件</el-button>
          <div slot="tip" style="color: dodgerblue" v-if="!stringIsNull(dataForm.filename)">
            已上传文件:<el-tag closable @close="dataForm.filename = ''">{{dataForm.filename}}</el-tag>
          </div>
          <div slot="tip" class="el-upload__tip">只能上传pdf,word,图片文件，且不超过10M</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import Vue from 'vue'

  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          id: 0,
          projectNo: '',
          projectNickname: '',
          avatarUrl: '',
          nickName: '',
          signature: '',
          clientName: '',
          clientPhone: '',
          clientAdvice: '',
          origin: '',
          gradeQuality: '',
          gradeRequire: '',
          gradeAttitude: '',
          gradeProgress: '',
          gradeProficiency: '',
          filename: '',
          createTime: ''
        },
        upResFileUrl: window.SITE_CONFIG['baseUrl'] + '/project/authach/upResFile/',  // 客户附件上传地址
        tokenHeaders: { token: Vue.cookie.get('token') },  // token请求
        dataRule: {
          projectNo: [
            { required: true, message: '项目编号不能为空', trigger: 'blur' }
          ],
          projectNickname: [
            { required: true, message: '项目名称不能为空', trigger: 'blur' }
          ],
          clientName: [
            { required: true, message: '客户名称不能为空', trigger: 'blur' }
          ],
          origin: [
            { required: true, message: '来源（1、自填写，2、客户）不能为空', trigger: 'blur' }
          ],
          gradeQuality: [
            { required: true, message: '成果质量评分不能为空', trigger: 'blur' }
          ],
          gradeRequire: [
            { required: true, message: '成果要求评分不能为空', trigger: 'blur' }
          ],
          gradeAttitude: [
            { required: true, message: '工作态度评分不能为空', trigger: 'blur' }
          ],
          gradeProgress: [
            { required: true, message: '工期进度评分不能为空', trigger: 'blur' }
          ],
          gradeProficiency: [
            { required: true, message: '技术熟练评分不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init (projectNo) {
        this.dataForm.projectNo = projectNo
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.projectNo) {
            this.$http({
              url: this.$http.adornUrl(`/project/authach/info/${this.dataForm.projectNo}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.id = data.projectAuthach.id
                this.dataForm.projectNo = data.projectAuthach.projectNo
                this.dataForm.projectNickname = data.projectAuthach.projectNickname
                this.dataForm.avatarUrl = data.projectAuthach.avatarUrl
                this.dataForm.nickName = data.projectAuthach.nickName
                this.dataForm.signature = data.projectAuthach.signature
                this.dataForm.clientName = data.projectAuthach.clientName
                this.dataForm.clientPhone = data.projectAuthach.clientPhone
                this.dataForm.clientAdvice = data.projectAuthach.clientAdvice
                this.dataForm.origin = '自填'
                this.dataForm.gradeQuality = data.projectAuthach.gradeQuality
                this.dataForm.gradeRequire = data.projectAuthach.gradeRequire
                this.dataForm.gradeAttitude = data.projectAuthach.gradeAttitude
                this.dataForm.gradeProgress = data.projectAuthach.gradeProgress
                this.dataForm.gradeProficiency = data.projectAuthach.gradeProficiency
                this.dataForm.filename = data.projectAuthach.filename
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/project/authach/updateSign`),
              method: 'post',
              data: this.$http.adornData({
                'id': this.dataForm.id,
                'projectNo': this.dataForm.projectNo,
                'projectNickname': this.dataForm.projectNickname,
                'avatarUrl': this.dataForm.avatarUrl,
                'nickName': this.dataForm.nickName,
                'signature': this.dataForm.signature,
                'clientName': this.dataForm.clientName,
                'clientPhone': this.dataForm.clientPhone,
                'clientAdvice': this.dataForm.clientAdvice,
                'origin': this.dataForm.origin,
                'gradeQuality': this.dataForm.gradeQuality,
                'gradeRequire': this.dataForm.gradeRequire,
                'gradeAttitude': this.dataForm.gradeAttitude,
                'gradeProgress': this.dataForm.gradeProgress,
                'gradeProficiency': this.dataForm.gradeProficiency,
                'filename': this.dataForm.filename,
                'createTime': new Date()
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500
                })
                this.visible = false
                this.$emit('refreshDataList')
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      // 上传文件之前的钩子
      handleBeforeUpload (file) {
        let size = file.size / 1024 / 1024 / 10
        if (size > 10) {
          this.$message({
            message: '文件必须小于10M',
            type: 'warning',
            duration: 1500
          })
        }
      },
      // 文件上传成功时的钩子
      handleSuccess (res, file, fileList) {
        console.log(res.fileName)
        this.dataForm.filename = res.fileName
        this.$message({
          message: '文件上传成功',
          type: 'success',
          duration: 1500,
          onClose: () => {
            this.$refs.upload.clearFiles()
          }
        })
      },
      // 文件上传失败时的钩子
      handleError (err, file, fileList) {
        this.$message.error('文件上传失败')
      }
    }
  }
</script>

<style lang="scss" scoped>
.sig_table {
  text-align: left;
  width: 100%;
  max-width: 500px;
  th {
    padding: 2px;
    font-size: 11pt;
  }
  td {
    text-align: left;
    padding: 1px 4px 20px 4px;
    width: 120px;
  }
}
</style>
